<template>
	<view>
		<view
			:class="state === 0 || state === 2 ? 'pad-b-80' : ''"
		>
			<PageDetails
				ref="pageDetails"
				:taskInfos="taskInfos"
				:dispatchResult="dispatchResult"
				:dispatchTel="dispatchTel"
				:cartInfos="cartInfos"
				:isAddRepair="state === 0 || state === 2 ? true : false"
				:isRejectedReason="isRejectedReason"
				:rejectedReason="rejectedReason"
				@handleUpdateData="updateData"
				@handleAddRepairInfo="handleAddRepairInfo"
				@handleWatchUsedQuantity="handleWatchUsedQuantity"
				@handleDelRepairComponent="handleDelRepairComponent"
				@handleClickLeftIcon="findRepairHistory"
			/>
		</view>
		
		<view
			v-if="state === 0"
			class="pos-f bg-white flex align-center pad-x-10 shadow-type-7"
			style="left: 0; bottom: 0; right: 0; height: 60px;"
		>
			<u-button type="primary" @click="handleShowWaitWork()">待工</u-button>
			<u-button type="error" :disabled="isOperate" class="mar-x-10" @click="handleShowTransferOrder()">转单</u-button>
			<u-button type="success" :disabled="isOperate || isCompletedWork" @click="handleCompletedWork()">完工</u-button>
		</view>
		
		<view
			v-else-if="state === 2"
			class="pos-f bg-white flex align-center pad-x-10 shadow-type-7"
			style="left: 0; bottom: 0; right: 0; height: 60px;"
		>
			<u-button type="primary" @click="save()">保存</u-button>
		</view>
		
		<!-- 待工 -->
		<CustomPopUp
			title="说明"
			:show="daigong.show"
		>
			<view slot="content" class="pad-10">
				<view>
					<u--textarea v-model="daigong.desc" placeholder="请输入文字说明"></u--textarea>
				</view>
				
				<view class="flex align-center justify-end mar-t-20">
					<u-button class="mar-r-10" @click.native.stop="handleCloseWaitWork()">取消</u-button>
					<u-button type="primary" @click.native.stop="handleWaitWork()">确定</u-button>
				</view>
			</view>
		</CustomPopUp>
		
		<!-- 转单 -->
		<CustomPopUp
			title="转单"
			:show="zhuandan.show"
		>
			<view slot="content" class="pad-10">
				<view>
					<u--textarea v-model="zhuandan.reason" placeholder="请输入转单原因"></u--textarea>
				</view>
				
				<view class="flex align-center justify-end mar-t-20">
					<u-button class="mar-r-10" @click.native.stop="handleCloseTransferOrder()">取消</u-button>
					<u-button type="primary" @click.native.stop="handleTransferOrder()">确定</u-button>
				</view>
			</view>
		</CustomPopUp>
	</view>
</template>

<script>
	import PageDetails from '@/components/PageDetails/index'
	import CustomPopUp from '@/components/CustomPopUp/index'
	import Utils from '@/utils/utils'
	import Settings from '@/utils/settings'
	
	import { mapState } from 'vuex'
	import { checkLogin, getSubstring, getStaticUrl } from '@/utils/lib'
	import { getTaskInfo, getTaskDetails, getRepairInfo, waitingWork, eidtRepairOrder, getAttachmentInfo } from '@/apis/applyTask'
	
	export default {
		components: {
			CustomPopUp,
			PageDetails,
		},
		
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				textMsgList: state => state.repair.textMsgList,
				pictureList: state => state.repair.pictureList,
				voiceList: state => state.repair.voiceList,
				videoList: state => state.repair.videoList,
				repairList: state => state.repair.repairList,
				classifyList: state => state.repair.classifyList,
			}),
		},
		
		watch: {
			// 监听故障件列表变化
			repairList(newVal, oldVal) {
				if (newVal && newVal.length > 0) {
					let isOperate = false
					let list = newVal.filter(item => item.isDel !== false)
					
					if (list.length > 0) {
						this.isOperate = true
					} else {
						this.isOperate = false
					}
				} else {
					this.isOperate = false
				}
			}
		},
		
		data() {
			return {
				// 标签状态：0 待完成，1 已完成，2 已驳回，3 待审核
				// 这个和后台接口的状态可能不一致，需要自行判断，因为后台接口给的状态有点乱
				state: 0,
				RepairTaskId: null, // 任务详情id，用来查询任务详情
				RepairOrderId: null, // 维修详情id，用来查询维修详情
				
				// 任务信息
				taskInfos: [],
				
				// 派工结果
				dispatchResult: '',
				
				// 派工结果人手机号
				dispatchTel: '',
				
				// 是否显示驳回原因
				isRejectedReason: false,
				
				// 驳回原因
				rejectedReason: '',
				
				// 车辆信息
				cartInfos: [],
				
				// 转单和完工是否可操作，当故障件发生变化时，转单和完工不可操作
				isOperate: false,
				
				// 完工是否可操作
				isCompletedWork: false,
				
				// 删除的故障件 id 集合
				repairItemIds: [],
				
				// 待工
				daigong: {
					show: false,
					desc: '',
				},
				
				// 转单
				zhuandan: {
					show: false,
					reason: '',
				}
			}
		},
		
		onLoad(options) {
			// 设置页面传过来的参数
			this.state = parseInt(options.state)
			this.RepairTaskId = options.RepairTaskId
			this.RepairOrderId = options.RepairOrderId
		},
		
		onShow() {
			checkLogin()
		},
		
		mounted() {
			this.initComponent() // 初始化组件
			this.findOrderDetails() // 查询订单详情
		},
		
		onUnload() {
			// 页面卸载后，重置一些状态管理中的数据
			this.$store.commit('repair/setDescInfo', { type: 1, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 2, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 3, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 4, data: [] })
			this.$store.commit('repair/resetRepairComponent', [])
		},
		
		methods: {
			// 初始化组件
			initComponent() {
				// 任务信息
				this.taskInfos = [
					{
						prop: 'customerName', // 字段
						label: '客户名称', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'contacts', // 字段
						label: '联系人', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'wangdian', // 字段
						label: '网点名称', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'address', // 字段
						label: '维修地址', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isRight: true, // 如果存在右侧图标，为 true ，反之 false
						rightIcon: 'icon-dizhi', // 右侧图标
						rightIconColor: '#3c9cff', // 右侧图标颜色
					}, {
						prop: 'mobile', // 字段
						label: '联系电话', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'repairDesc', // 字段
						label: '故障描述', // 字段名称
						pageTitle: '附件列表',
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}, {
						prop: 'applyPerson', // 字段
						label: '申请人', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isRight: true, // 如果存在右侧图标，为 true ，反之 false
						rightIcon: 'icon-dianhua', // 右侧图标
						rightIconColor: '#3c9cff', // 右侧图标颜色
					}
				]
				
				// 车辆信息
				this.cartInfos = [
					{
						prop: 'cartNumber', // 字段
						label: '车号', // 字段名称
						readonly: this.state === 2 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 2 ? true : false, // 是否显示边框
						border: this.state === 2 ? 'surround' : '', // 只有 isBorder 为 true 才生效
						isEdit: this.state === 2 ? true : false, // 是否可编辑
						isRight: this.state === 2 ? true : false, // 如果存在右侧图标，为 true ，反之 false
						isTitleIcon: this.state === 2 ? true : false, // 是否启用标题左侧图标
						titleIcon: this.state === 2 ? 'icon-gongdan' : '', // 标题左侧图标名称
						rightIcon: this.state === 2 ? 'icon-iconfontscan' : '', // 右侧图标
						rightIconColor: this.state === 2 ? '#3c9cff' : '', // 右侧图标颜色
						isInputIcon: this.state === 2 ? true : false, // 是否启用表单内图标
						inputIcon: this.state === 2 ? 'icon-chezi' : '', // 表单内图标名称
						inputIconColor: this.state === 2 ? '#bd3124' : '', // 表单内图标颜色
					}, {
						prop: 'cartType', // 字段
						label: '车型', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'materialDesc', // 字段
						label: '物料描述', // 字段名称
						pageTitle: '物料描述', // 描述页面的标题
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}, {
						prop: 'configInfo', // 字段
						label: '配置信息', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: null, // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'componentInfo', // 字段
						label: '关键零部件号', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: null, // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'buyerTime', // 字段
						label: '购买日期', // 字段名称
						readonly: this.state === 2 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 2 ? true : false, // 是否显示边框
						border: this.state === 2 ? 'surround' : '', // 只有 isBorder 为 true 才生效
						isEdit: this.state === 2 ? true : false, // 是否可编辑
					}, {
						prop: 'hourPrice', // 字段
						label: '小时计费', // 字段名称
						readonly: this.state === 0 || this.state === 2 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 || this.state === 2 ? true : false, // 是否显示边框
						border: 'surround', // 只有 isBorder 为 true 才生效
						isEdit: this.state === 2 ? true : false, // 是否可编辑
					}, {
						prop: 'laborCost', // 字段
						label: '工时计费', // 字段名称
						readonly: this.state === 2 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 2 ? true : false, // 是否显示边框
						border: this.state === 2 ? 'surround' : '', // 只有 isBorder 为 true 才生效
						isEdit: this.state === 2 ? true : false, // 是否可编辑
					}, {
						prop: 'customerLevelInfo', // 字段
						label: '客户评级', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: null, // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'sceneDetails', // 字段
						label: '现场详情', // 字段名称
						pageTitle: this.state === 0 || this.state === 2 ? '故障描述' : '附件列表',
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: this.state === 0 || this.state === 2 ? true : false, // 是否可编辑
					}
				]
			},
			
			// 查询订单详情数据，并回显
			async findOrderDetails() {
				let params1 = {
					token: this.token,
					location: this.longitude + ',' + this.latitude,
				}
				
				let params2 = {
					token: this.token,
					location: this.longitude + ',' + this.latitude,
					id: this.RepairOrderId
				}
				
				let result1 = null
				
				if (this.state !== 2) {
					params1.id = this.RepairTaskId
					result1 = await getTaskInfo(params1) // 任务详情
				} else {
					// 已驳回详情
					params1.id = this.RepairOrderId
					result1 = await getTaskDetails(params1) // 任务详情
				}
				
				let result2 = await getRepairInfo(params2) // 维修详情
				
				Utils.loading('正在加载中...')
				Promise.all([result1, result2]).then(res => {
					uni.hideLoading()
					
					if (res && res.length > 0) {
						let taskInfo = res[0].Result
						let repairInfo = res[1].Result
						let data = {
							RepairOrderId: repairInfo.RepairOrderId, // 维修id
							customerName: taskInfo.Customer.CName, // 客户名称
							contacts: taskInfo.Customer.LinkMan, // 联系人
							wangdian: taskInfo.DotName, // 网点名称
							address: taskInfo.Customer.Address, // 维修地址
							mobile: taskInfo.Customer.Mobile, // 联系方式
							applyPerson: taskInfo.CreateUserName, // 申请人
							dispatchResult: taskInfo.AuditorName, // 派工结果
							dispatchTel: taskInfo.AuditorTel, // 派工结果人的手机号
							cartNumber: taskInfo.RepairVehicle.VehicleNumber, // 车号
							cartType: taskInfo.RepairVehicle.VehicleType, // 车型
							reason: taskInfo.Reason, // 驳回原因
							repairDesc: {
								title: '故障描述',
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: []
							},
							materialDesc: {
								title: '物料描述',
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: []
							},
							configInfo: {
								label: '配置信息',
								isLink: true,
								list: [
									{ label: '工作环境', value: '鲲鹏果业' },
									{ label: '吨位', value: '10T' },
									{ label: '叉车车型', value: '陕西合力叉车' },
									{ label: '维修地址', value: 'G2系列deja脚手架基地' },
									{ label: '联系电话', value: '17325252526' },
									{ label: '故障描述', value: '车轮坏了' },
									{ label: '申请人', value: '张三' },
								]
							},
							componentInfo: {
								label: '关键零部件号',
								isLink: true,
								list: [
									{ label: '工作环境', value: '鲲鹏果业' },
									{ label: '吨位', value: '10T' },
									{ label: '叉车车型', value: '陕西合力叉车' },
									{ label: '维修地址', value: 'G2系列deja脚手架基地' },
									{ label: '联系电话', value: '17325252526' },
									{ label: '故障描述', value: '车轮坏了' },
									{ label: '申请人', value: '张三' },
								]
							},
							buyerTime: taskInfo.RepairVehicle.BuyDate, // 购买日期
							hourPrice: taskInfo.RepairVehicle.UsedHour !== null && taskInfo.RepairVehicle.UsedHour !== '' ? taskInfo.RepairVehicle.UsedHour.toString() : '', // 小时计费
							laborCost: taskInfo.TimeFee !== null && taskInfo.TimeFee !== '' ? taskInfo.TimeFee.toString() : '', // 工时计费
							customerLevelInfo: {
								label: '客户评级',
								isLink: true,
								list: [
									{ label: '工作环境', value: '鲲鹏果业' },
									{ label: '吨位', value: '10T' },
									{ label: '叉车车型', value: '陕西合力叉车' },
									{ label: '维修地址', value: 'G2系列deja脚手架基地' },
									{ label: '联系电话', value: '17325252526' },
									{ label: '故障描述', value: '车轮坏了' },
									{ label: '申请人', value: '张三' },
								]
							},
							sceneDetails: {
								title: '现场详情',
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: []
							},
						}
						
						this.showData(data) // 回显任务信息
						this.showComponents(repairInfo.ItemList) // 回显故障件信息
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
			// 查询附件信息
			findAttachmentInfo(id) {
				return new Promise((resolve) => {
					let params = {
						id,
						Token: this.token,
						location: this.longitude + ',' + this.latitude,
						typeEx: 0
					}
					
					getAttachmentInfo(params).then(res => {
						resolve(res)
					}).catch(err => {
						console.log(err)
					})
				})
			},
			
			// 回显附件（类似）信息
			async showAttachmentInfo(RepairOrderItemId) {
				let attachmentInfo = await this.findAttachmentInfo(RepairOrderItemId)
				let infos = attachmentInfo.Result
				let attachmentText = []
				let attachmentPicture = []
				let attachmentVoice = []
				let attachmentVideo = []
				
				if (infos && infos.length > 0) {
					let arr1 = infos.filter(j => j.AttachmentType === 1) // 获取文本内容
					let arr2 = infos.filter(j => j.AttachmentType === 2) // 获取图片内容
					let arr3 = infos.filter(j => j.AttachmentType === 4) // 获取音频内容
					let arr4 = infos.filter(j => j.AttachmentType === 8) // 获取视频内容
					
					// 如果存在文本，那么将文本添加到列表中
					if (arr1.length > 0) {
						arr1.forEach(item => {
							attachmentText.push({
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: item.Description, // 文字或服务端返回的新文件名
								OriginalFileName: item.OriginalFileName, // 原始文件名
								Size: item.Size, // 文件大小
							})
						})
					}
					
					// 如果存在图片，那么将图片数据添加到列表中
					if (arr2.length > 0) {
						arr2.forEach(item => {
							attachmentPicture.push({
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: getSubstring(getStaticUrl(item.Description), '/'), // 文字或服务端返回的新文件名
								OriginalFileName: item.OriginalFileName, // 原始文件名
								Size: item.Size, // 文件大小
								url: Settings.uploadIp + '/' + getStaticUrl(item.Description), // 用来回显数据的字段
							})
						})
					}
					
					// 如果存在语音，那么将语音添加到列表中
					if (arr3.length > 0) {
						arr3.forEach((item, index) => {
							attachmentVoice.push({
								// id: index + 1, // 记录当前语音位置
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: getSubstring(getStaticUrl(item.Description), '/'), // 文字或服务端返回的新文件名
								OriginalFileName: item.OriginalFileName, // 原始文件名
								Size: item.Size, // 文件大小
								isPlayAudio: false, // 是否播报语音
								url: Settings.uploadIp + '/' + getStaticUrl(item.Description), // 用来回显数据的字段
							})
						})
					}
					
					// 如果存在视频，那么将视频添加到列表中
					if (arr4.length > 0) {
						arr4.forEach((item, index) => {
							attachmentVideo.push({
								// id: index + 1, // 记录当前视频位置
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: getSubstring(getStaticUrl(item.Description), '/'), // 文字或服务端返回的新文件名
								OriginalFileName: item.OriginalFileName, // 原始文件名
								Size: item.Size, // 文件大小
								url: Settings.uploadIp + '/' + getStaticUrl(item.Description), // 用来回显数据的字段
							})
						})
					}
				}
				
				return {
					attachmentText,
					attachmentPicture,
					attachmentVoice,
					attachmentVideo
				}
			},
			
			// 回显数据，data：需要回显的数据集合
			async showData(data) {
				// 现场详情
				let info = await this.showAttachmentInfo(data.RepairOrderId)
				
				// 设置任务信息
				this.taskInfos.forEach(item => {
					for (let i in data) {
						if (
							item.prop === i &&
							item.prop !== 'repairDesc'
						) {
							item.value = data[i]
						}
						
						// 故障描述
						if (item.prop === 'repairDesc') {
							item.label = data.repairDesc.title
							item.textMsgList = data.repairDesc.textMsgList
							item.pictureList = data.repairDesc.pictureList
							item.voiceList = data.repairDesc.voiceList
							item.videoList = data.repairDesc.videoList
							item.isEdit = this.state === 2 ? false : true
						}
					}
				})
				
				// 设置派工结果
				this.dispatchResult = data.dispatchResult
				this.dispatchTel = data.dispatchTel
				
				// 设置驳回原因
				if (this.state === 2) {
					this.isRejectedReason = true
					this.rejectedReason = data.reason
				}
				
				// 设置车辆信息
				this.cartInfos.forEach(item => {
					for (let i in data) {
						if (
							item.prop === i &&
							item.prop !== 'materialDesc' &&
							item.prop !== 'configInfo' &&
							item.prop !== 'componentInfo' &&
							item.prop !== 'sceneDetails' &&
							item.prop !== 'customerLevelInfo'
						) {
							item.value = data[i]
						}
						
						// 物料描述
						if (item.prop === 'materialDesc') {
							item.label = data.materialDesc.title
							item.textMsgList = data.materialDesc.textMsgList
							item.pictureList = data.materialDesc.pictureList
							item.voiceList = data.materialDesc.voiceList
							item.videoList = data.materialDesc.videoList
						}
						
						// 配置信息
						if (item.prop === 'configInfo') {
							item.value = data.configInfo
						}
						
						// 关键零部件号详情
						if (item.prop === 'componentInfo') {
							item.value = data.componentInfo
						}
						
						// 现场详情
						if (item.prop === 'sceneDetails') {
							item.repairOrderId = data.RepairOrderId
							item.label = data.sceneDetails.title
							item.textMsgList = info.attachmentText
							item.pictureList = info.attachmentPicture
							item.voiceList = info.attachmentVoice
							item.videoList = info.attachmentVideo
						}
						
						// 客户评级信息
						if (item.prop === 'customerLevelInfo') {
							item.value = data.customerLevelInfo
						}
					}
				})
			},
			
			// 回显故障件列表
			showComponents(list) {
				let repairList = []
				
				list.forEach(async(item) => {
					// 回显维修类型数据
					let repairTypeName = ''
					
					if (item.RepairType !== null && item.RepairType !== '') {
						if (item.RepairType === 1) {
							repairTypeName = '非三包件'
						} else if (item.RepairType === 2) {
							repairTypeName = '股份三包'
						} else if (item.RepairType === 3) {
							repairTypeName = '网点三包'
						}
					}
					
					// 回显附件等数据信息
					let info = await this.showAttachmentInfo(item.RepairOrderItemId)
					let obj = {
						classifyTitle: '系统分类',
						classifyName: this.classifyList.filter(j => j.id == item.FaultClass)[0].label,
						titleBg: this.state === 0 || this.state === 3 ? '#3c9cff' : '#eeeeee',
						titleColor: this.state === 0 || this.state === 3 ? '#ffffff' : '#333333',
						isExpand: true,
						isDel: this.state === 0 || this.state === 3 ? false : true, // 是否可以删除
						repairOrderItemId: item.RepairOrderItemId, // 这个是从后台查询到的参数
						repairOrderId: item.RepairOrderId, // 这个是从后台查询到的参数
						list: [
							{
								label: '名称',
								value: item.MaterialName,
								prop: 'name',
								theme: this.state === 2 ? 'input' : 'table',
								readonly: this.state === 2 ? false : true,
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [],
							}, {
								label: '图件号',
								value: item.MaterialNum,
								prop: 'num',
								theme: this.state === 2 ? 'input' : 'table',
								readonly: this.state === 2 ? false : true,
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [],
							}, {
								label: '单价',
								value: item.Price,
								prop: 'unitPrice',
								theme: this.state === 0 || this.state === 2 ? 'input' : 'table',
								readonly: this.state === 0 || this.state === 2 ? false : true,
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [],
							}, {
								label: '附件',
								value: '',
								prop: 'attachment',
								theme: this.state === 2 ? 'input' : 'table',
								pageTitle: '附件列表',
								readonly: true,
								textMsgList: info.attachmentText,
								pictureList: info.attachmentPicture,
								voiceList: info.attachmentVoice,
								videoList: info.attachmentVideo,
								isEdit: false,
							}, {
								label: '需求数量',
								value: item.PlanAmount,
								prop: 'demand',
								theme: this.state === 2 ? 'input' : 'table',
								readonly: this.state === 2 ? false : true,
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [] ,
							}, {
								label: '申请数量',
								value: item.ApplyAmount,
								prop: 'apply',
								theme: this.state === 2 ? 'input' : 'table',
								readonly: this.state === 2 ? false : true,
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [] ,
							}, {
								label: '单位',
								value: item.Unit,
								prop: 'unit',
								theme: this.state === 2 ? 'input' : 'table',
								readonly: this.state === 2 ? false : true,
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [] ,
							},
							{ label: '故障件条码', value: '', prop: 'repairNo', textMsgList: [], pictureList: [], voiceList: [], videoList: [], repairNoList: [] },
							{
								label: '维修类型',
								value: repairTypeName,
								prop: 'repairType',
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [],
								isEdit: true
							},
						]
					}
					
					if (this.state === 0) {
						// 待维修 - 详情：如果详情中存在故障件列表，那么在申请数量后追加一个消耗数量的元素
						let el = {
							label: '消耗数量',
							value: item.UsedQuantity,
							prop: 'usedQuantity',
							theme: this.state === 0 || this.state === 2 ? 'input' : 'table',
							readonly: this.state === 0 || this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [] ,
						}
						
						obj.list.splice(6, 0, el)
					}
					
					// 如果维修类型是股份三包，回显对应的结算类型数据
					if (item.RepairType === 2) {
						let settlementTypeName = ''
						
						if (item.SettlementType === 1) {
							settlementTypeName = '实物结算'
						} else if (item.SettlementType === 2) {
							settlementTypeName = '货币结算'
						}
						
						obj.list.push({
							label: '结算类型',
							value: settlementTypeName,
							prop: 'settlementType',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							isEdit: true,
						})
					}
					
					repairList.push(obj)
				})
				
				// 将故障件列表添加到页面中
				this.$store.commit('repair/resetRepairComponent', repairList)
			},
			
			// 修改详情中某个字段下的属性值
			// type：1 车辆信息
			// field：要修改哪个字段中的数据
			// attr：要修改哪个字段下的哪个属性值集合（因为可能是多个属性同时修改）
			// data：修改后的值
			updateData({ type, field, attrs, data}) {
				if (type === 1) {
					// 修改车辆信息中数据
					this.cartInfos.forEach(item => {
						if (item.prop === field) {
							let arr = attrs.split(',')
							
							arr.forEach(j => {
								item[j] = data[j]
							})
						}
					})
				}
			},
			
			// 添加故障件
			handleAddRepairInfo(data) {
				let obj = {
					classifyTitle: '系统分类',
					classifyName: data.classifyTitle,
					isExpand: true,
					repairOrderItemId: '', // 这个是从后台查询到的参数
					repairOrderId: '', // 这个是从后台查询到的参数
					list: [
						{
							label: '名称',
							value: data.name,
							prop: 'name',
							theme: this.state === 2 ? 'input' : 'table',
							readonly: this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						}, {
							label: '图件号',
							value: data.num,
							prop: 'num',
							theme: this.state === 2 ? 'input' : 'table',
							readonly: this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						}, {
							label: '单价',
							value: data.unitPrice,
							prop: 'unitPrice',
							theme: this.state === 2 ? 'input' : 'table',
							readonly: this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						}, {
							label: '附件',
							value: '',
							prop: 'attachment',
							pageTitle: '故障描述',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							isEdit: this.state === 2 ? false : true,
						}, {
							label: '需求数量',
							value: data.demand,
							prop: 'demand',
							theme: this.state === 2 ? 'input' : 'table',
							readonly: this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						}, {
							label: '申请数量',
							value: data.apply,
							prop: 'apply',
							theme: this.state === 2 ? 'input' : 'table',
							readonly: this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						},
						{ label: '单位', value: data.unit, prop: 'unit', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{
							label: '故障件条码',
							value: '',
							prop: 'repairNo',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							repairNoList: []
						}, {
							label: '维修类型',
							value: '',
							prop: 'repairType',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							isEdit: true,
						},
					]
				}
				
				// 将添加的故障件信息加入到状态管理中
				this.$store.commit('repair/setRepairComponent', obj)
			},
			
			// 点击添加故障件中的附件时，设置跳转到下一个页面的标题
			setAttchmentTitle(index) {
				let title = '故障描述'
				
				return title
			},
			
			// 获取待工、转单、完工的参数
			// Remark 转单备注、待工备注或是完工备注
			getQuerys(Remark, State) {
				// 获取故障件列表中的参数
				let repairList = JSON.parse(JSON.stringify(this.repairList))
				let ItemList = []
				
				repairList.forEach((item, index) => {
					let repairTypeName = item.list.filter(j => j.prop === 'repairType')[0].value
					let repairType = null
					let settlementType = null
					
					if (repairTypeName) {
						if (repairTypeName === '股份三包') {
							repairType = 2
						} else if (repairTypeName === '非三包件') {
							repairType = 1
						} else if (repairTypeName === '网点三包') {
							repairType = 3
						}
					}
					
					if (repairType === 2) {
						// 股份三包
						let settlementTypeName = item.list.filter(j => j.prop === 'settlementType')[0].value
						
						if (settlementTypeName) {
							if (settlementTypeName === '实物结算') {
								settlementType = 1
							} else if (settlementTypeName === '货币结算') {
								settlementType = 2
							}
						}
					}
					
					// 附件
					let attachmentList = []
					let textMsgList = item.list.filter(j => j.prop === 'attachment')[0].textMsgList
					let pictureList = item.list.filter(j => j.prop === 'attachment')[0].pictureList
					let voiceList = item.list.filter(j => j.prop === 'attachment')[0].voiceList
					let videoList = item.list.filter(j => j.prop === 'attachment')[0].videoList
					
					if (textMsgList.length > 0) {
						textMsgList.forEach((item, index) => {
							attachmentList.push({
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: item.Description, // 文字或服务端返回的新文件名
								OriginalFileName: '', // 原始文件名
								Size: null, // 文件大小
								IsUpload: 1, // 固定传值
							})
						})
					}
					
					if (pictureList.length > 0) {
						pictureList.forEach((item, index) => {
							attachmentList.push({
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: item.Description, // 文字或服务端返回的新文件名
								OriginalFileName: item.OriginalFileName, // 原始文件名
								Size: item.Size, // 文件大小
								IsUpload: 1, // 固定传值
							})
						})
					}
					
					if (voiceList.length > 0) {
						voiceList.forEach((item, index) => {
							attachmentList.push({
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: item.Description, // 文字或服务端返回的新文件名
								OriginalFileName: item.OriginalFileName, // 原始文件名
								Size: item.Size, // 文件大小
								IsUpload: 1, // 固定传值
							})
						})
					}
					
					if (videoList.length > 0) {
						videoList.forEach((item, index) => {
							attachmentList.push({
								AttachmentId: item.AttachmentId , // 行 id 添加时传 0
								AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
								Description: item.Description, // 文字或服务端返回的新文件名
								OriginalFileName: item.OriginalFileName, // 原始文件名
								Size: item.Size, // 文件大小
								IsUpload: 1, // 固定传值
							})
						})
					}
					
					// 故障件条码
					let repairNoList = item.list.filter(j => j.prop === 'repairNo')[0].repairNoList
					let traceItemList = []
					
					repairNoList.forEach(item => {
						traceItemList.push({
							OldTraceNum: item.OldTraceNum,
							NewTraceNum: item.NewTraceNum,
							MaterialTraceId: item.MaterialTraceId,
							RecordList: item.RecordList,
						})
					})
					
					// 系统分类
					let FaultClass = this.classifyList.filter(j => j.label === item.classifyName)[0].id
					let obj = {
						PlanAmount: item.list.filter(j => j.prop === 'demand')[0].value, // 需求数量
						ApplyAmount: item.list.filter(j => j.prop === 'apply')[0].value, // 申请数量
						AttachmentList: attachmentList, // 附件列表
						TraceItemList: traceItemList, // 故障件条形码列表
						FaultClass, // 系统分类id
						MaterialNumOfComp: '', // 公司图件号（暂时不填后期补上）
						MaterialNameOfComp: '', // 公司图件名称（暂时不填后期补上）
						MaterialNum: item.list.filter(j => j.prop === 'num')[0].value, // 网点图件号
						MaterialName: item.list.filter(j => j.prop === 'name')[0].value, // 网点图件名称
						RepairType: repairType, // 维修类型，1 非三包件、2 股份三包、3 网点三包(System.Int32)
						SettlementType: repairType === 2 ? settlementType : '', // 1实物结算、2货币结算(System.Int32)
						Unit: item.list.filter(j => j.prop === 'unit')[0].value, // 单位
						Price: item.list.filter(j => j.prop === 'unitPrice')[0].value, // 单价
						RepairOrderItemId: item.repairOrderItemId, // 故障件id
						repairOrderId: item.repairOrderId, // 维修单id
					}
					
					ItemList.push(obj)
				})
				
				// 现场详情
				let info = this.cartInfos.filter(item => item.prop === 'sceneDetails')[0]
				let attachmentList = []
				
				if (info.textMsgList.length > 0) {
					info.textMsgList.forEach((item, index) => {
						attachmentList.push({
							AttachmentId: item.AttachmentId , // 行 id 添加时传 0
							AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
							Description: item.Description, // 文字或服务端返回的新文件名
							OriginalFileName: '', // 原始文件名
							Size: null, // 文件大小
							IsUpload: 1, // 固定传值
						})
					})
				}
				
				if (info.pictureList.length > 0) {
					info.pictureList.forEach((item, index) => {
						attachmentList.push({
							AttachmentId: item.AttachmentId , // 行 id 添加时传 0
							AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
							Description: item.Description, // 文字或服务端返回的新文件名
							OriginalFileName: item.OriginalFileName, // 原始文件名
							Size: item.Size, // 文件大小
							IsUpload: 1, // 固定传值
						})
					})
				}
				
				if (info.voiceList.length > 0) {
					info.voiceList.forEach((item, index) => {
						attachmentList.push({
							AttachmentId: item.AttachmentId , // 行 id 添加时传 0
							AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
							Description: item.Description, // 文字或服务端返回的新文件名
							OriginalFileName: item.OriginalFileName, // 原始文件名
							Size: item.Size, // 文件大小
							IsUpload: 1, // 固定传值
						})
					})
				}
				
				if (info.videoList.length > 0) {
					info.videoList.forEach((item, index) => {
						attachmentList.push({
							AttachmentId: item.AttachmentId , // 行 id 添加时传 0
							AttachmentType: item.AttachmentType, // 1 文本，2 图片，4 音频，8 视频
							Description: item.Description, // 文字或服务端返回的新文件名
							OriginalFileName: item.OriginalFileName, // 原始文件名
							Size: item.Size, // 文件大小
							IsUpload: 1, // 固定传值
						})
					})
				}
				
				let params = {
					ItemList, // 故障件列表
					Remark, // 转单备注、待工备注或是完工备注
					RepairOrderId: this.RepairOrderId, // 维修任务id
					AttachmentList: attachmentList, // 现场详情
					RepairVehicle: {
						BuyDate: this.cartInfos.filter(item => item.prop === 'buyerTime')[0].value, // 购买日期
						UsedHour: this.cartInfos.filter(item => item.prop === 'hourPrice')[0].value, // 小时计费
						VehicleDescription: '', // 车辆（物料）描述
						VehicleNumber: this.cartInfos.filter(item => item.prop === 'cartNumber')[0].value, // 车号
						VehicleType: this.cartInfos.filter(item => item.prop === 'cartType')[0].value, // 车型
					},
					State, // 质量部旧件返回确认  固定值
					TimeFee: this.cartInfos.filter(item => item.prop === 'laborCost')[0].value, // 工时计费
				}
				
				return params
			},
			
			// 显示待工弹窗
			handleShowWaitWork() {
				// 待完成状态下，小时计费必须大于 1 才可以待工
				if (this.state === 0) {
					let hourPrice = parseFloat(this.cartInfos.filter(item => item.prop === 'hourPrice')[0].value)
					
					if (hourPrice <= 1) {
						Utils.popUpMsg('none', '小时计费必须大于 1', 1000)
						return
					}
				}
				
				this.daigong.show = true
			},
			
			// 待工
			handleWaitWork() {
				if (!this.daigong.desc) {
					Utils.popUpMsg('none', '请填写待工文字说明！', 1500)
					return
				}
				
				let params = this.getQuerys(this.daigong.desc, 12)
				
				Utils.loading('待工操作中...')
				
				waitingWork(params, this.token, this.longitude + ',' + this.latitude).then(res => {
					this.handleCloseWaitWork()
					Utils.popUpMsg('success', res.Message, 500)
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 500)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			
			// 关闭待工弹窗
			handleCloseWaitWork() {
				this.daigong.desc = ''
				this.daigong.show = false
			},
			
			// 显示转单弹窗
			handleShowTransferOrder() {
				this.zhuandan.show = true
			},
			
			// 转单
			handleTransferOrder() {
				if (!this.zhuandan.reason) {
					Utils.popUpMsg('none', '请填写转单原因！', 1500)
					return
				}
				
				let params = this.getQuerys(this.zhuandan.reason, 13)
				
				Utils.loading('转单操作中...')
				
				waitingWork(params, this.token, this.longitude + ',' + this.latitude).then(res => {
					this.handleCloseTransferOrder()
					Utils.popUpMsg('success', res.Message, 500)
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 500)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			
			// 关闭转单弹窗
			handleCloseTransferOrder() {
				this.zhuandan.reason = ''
				this.zhuandan.show = false
			},
			
			// 监听消耗数量变化
			handleWatchUsedQuantity({ index, row }) {
				this.repairList.forEach((item, i) => {
					if (i === index) {
						let demandCount = parseInt(item.list.filter(j => j.prop === 'demand')[0].value)
						let usedQuantity = parseInt(row.value)
						
						if (usedQuantity > demandCount) {
							Utils.popUpMsg('none', '消耗数量不得超过需求数量！', 1000)
							this.isCompletedWork = true
						} else {
							this.isCompletedWork = false
						}
					}
				})
			},
			
			// 完工
			handleCompletedWork() {
				let isFlag = false
				
				this.repairList.forEach(item => {
					item.list.forEach(item => {
						if (item.prop === 'usedQuantity') {
							if (parseFloat(item.value) === 0) {
								isFlag = true
							}
						}
					})
				})
				
				let msg = ''
				
				if (isFlag) {
					msg = '消耗数量为零，是否确认提交'
				} else {
					msg = '是否确认提交'
				}
				
				Utils.modal('提示', msg, (res) => {
					if (res.confirm) {
						let params = this.getQuerys('', 11)
						
						Utils.loading('完工操作中...')
						
						waitingWork(params, this.token, this.longitude + ',' + this.latitude).then(res => {
							Utils.popUpMsg('success', res.Message, 500)
							setTimeout(() => {
								uni.navigateBack({ delta: 1 })
							}, 500)
						}).catch(err => {
							uni.hideLoading()
							console.log(err)
						})
					}
				})
			},
			
			// 删除故障件返回的数据信息
			handleDelRepairComponent(repairOrderItemId) {
				this.repairItemIds.push(repairOrderItemId)
			},
			
			// 当页面状态为 ‘已驳回’ 即（state === 2）时，点击保存的回调函数
			save() {
				let params = this.getQuerys('', 1)
				
				params.IsAttachment = 0
				params.DelItemList = this.repairItemIds
				
				Utils.modal('提示', '确定提交数据吗？', (res) => {
					if (res.confirm) {
						Utils.loading('数据提交中...')
						
						eidtRepairOrder(params, this.token, this.longitude + ',' + this.latitude).then(res => {
							uni.hideLoading()
							Utils.popUpMsg('success', res.Message, 500)
							setTimeout(() => {
								uni.navigateBack({ delta: 1 })
							}, 500)
						}).catch(err => {
							uni.hideLoading()
						})
					}
				})
			},
			
			// 点击车号左侧图标，查询车辆维修历史
			findRepairHistory({ e, row }) {
				if (!row.value) {
					Utils.popUpMsg('error', '车号不得为空', 1500)
					return
				}
				
				uni.navigateTo({
					url: `/pages/repairManage/repairHistory/repairHistory?cartNum=${ row.value }`
				})
			},
		}
	}
</script>

<style>

</style>
